<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>查看图书</title>

        <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
        <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet">
        <link th:href="@{/css/plugins/dataTables/datatables.min.css}" rel="stylesheet">
        <link th:href="@{/css/animate.css}" rel="stylesheet">
        <link th:href="@{/css/style.css}" rel="stylesheet">

    </head>

    <body>

        <div id="wrapper">

            <nav class="navbar-default navbar-static-side" role="navigation">
                <div class="sidebar-collapse">
                    <ul class="nav metismenu" id="side-menu">
                        <li class="nav-header">
                            <div class="dropdown profile-element">
                                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">惠岩</strong>
                             </span> <span class="text-muted text-xs block">管理员 <b class="caret"></b></span> </span>
                                </a>
                                <ul class="dropdown-menu animated fadeInRight m-t-xs">
                                    <li class="divider"></li>
                                    <li><a href="/custom/logout">退出登录</a></li>
                                </ul>
                            </div>
                            <div class="logo-element">
                                摆烂
                            </div>
                        </li>
                        <li>
                            <a href="/custom/myAppoint"><i class="fa fa-home"></i> <span
                                    class="nav-label">个人中心</span></a>
                        </li>
                        <li>
                            <a href="/dispatcher/graph_flot"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">借阅榜</span></a>
                        </li>
                        <li>
                            <a href="/custom/listBook?bookName="><i class="fa fa-bar-chart-o"></i> <span
                                    class="nav-label">浏览馆藏</span></a>
                        </li>
                        <li class="active">
                            <a href="/customer/adminBook/listBook"><i class="fa fa-table"></i> <span
                                    class="nav-label">管理图书</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level collapse">
                                <li class="active"><a href="/customer/adminBook/listBook">查看图书</a></li>
                                <li><a href="/customer/adminBook/addBookPage">添加图书</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="/customer/adminUser/listUser?userId="><i class="fa fa-slideshare"></i> <span
                                    class="nav-label">管理用户</span><span
                                    class="fa arrow"></span></a>
                            <ul class="nav nav-second-level collapse">
                                <li><a href="/customer/adminUser/listUser?userId=">查看用户</a></li>
                                <li><a href="/customer/adminOperation/listAction?userId=">用户借阅情况</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="/uploadPage"><i class="fa fa-send"></i> <span class="nav-label">文件上传</span></a>
                        </li>
                    </ul>

                </div>
            </nav>

            <div id="page-wrapper" class="gray-bg">
                <div class="row border-bottom">
                    <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                        <div class="navbar-header">
                            <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i
                                    class="fa fa-bars"></i>
                            </a>
                            <form role="search" class="navbar-form-custom" action="search_results.html">
                                <div class="form-group">
                                    <input type="text" placeholder="Search for something..." class="form-control"
                                           name="top-search" id="top-search">
                                </div>
                            </form>
                        </div>
                        <ul class="nav navbar-top-links navbar-right">
                            <li>
                                <span class="m-r-sm text-muted welcome-message">欢迎来到摆烂图书管理系统</span>
                            </li>
                            <li>
                                <a href="/">
                                    <i class="fa fa-male"></i> 个人中心
                                </a>
                            </li>
                            <li>
                                <a href="/custom/logout">
                                    <i class="fa fa-sign-out"></i> 退出登录
                                </a>
                            </li>
                        </ul>

                    </nav>
                </div>
                <div class="row wrapper border-bottom white-bg page-heading">
                    <div class="col-lg-10">
                        <h2>查看图书</h2>
                        <ol class="breadcrumb">
                            <li>
                                <a href="index.html">首页</a>
                            </li>
                            <li>
                                <a>管理图书</a>
                            </li>
                            <li class="active">
                                <strong>查看图书</strong>
                            </li>
                        </ol>
                    </div>
                    <div class="col-lg-2">

                    </div>
                </div>
                <div class="wrapper wrapper-content animated fadeInRight">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>图书库现有图书</h5>
                                    <div class="text-right">

                                        <div class="ibox-tools flex">
                                            <a class="collapse-link">
                                                <i class="fa fa-chevron-up"></i>
                                            </a>
                                            <a class="close-link">
                                                <i class="fa fa-times"></i>
                                            </a>
                                        </div>

                                        <!-- 添加图书弹窗按钮 -->
                                        <div>
                                            <a data-toggle="modal" class="btn btn-primary" href="#modal-form">添加图书</a>
                                        </div>
                                        <!-- 添加图书按钮的弹窗 -->
                                        <div id="modal-form" class="modal fade" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-body">
                                                        <div class="row">
                                                            <div class="col-sm-12 b-r">
                                                                <h3 class="m-t-none m-b text-center">添加图书</h3>

                                                                <p>添加更多的摆烂书</p>

                                                                <form action="#" method="get"
                                                                      class="form-horizontal m-t">
                                                                    <div class="form-group"><label
                                                                            class="col-sm-2 control-label">图书名</label>

                                                                        <div class="col-sm-8"><input type="text"
                                                                                                     class="form-control"
                                                                                                     required
                                                                                                     id="book_name1"
                                                                                                     name="bookname"
                                                                                                     placeholder="bookname">
                                                                        </div>
                                                                    </div>
                                                                    <div class="hr-line-dashed"></div>
                                                                    <div class="form-group"><label
                                                                            class="col-sm-2 control-label">图书数量</label>

                                                                        <div class="col-sm-8"><input type="text"
                                                                                                     class="form-control"
                                                                                                     required
                                                                                                     id="bookname"
                                                                                                     name="booknum"
                                                                                                     placeholder="booknum">
                                                                        </div>
                                                                    </div>

                                                                    <div class="hr-line-dashed"></div>
                                                                    <div class="form-group">

                                                                        <div class="form-group"><label
                                                                                class="col-sm-2 control-label">图书状态<br/>
                                                                            <small class="text-navy">图书<br/>是否可用</small></label>

                                                                            <div class="col-sm-10">
                                                                                <label class="checkbox-inline"><input
                                                                                        type="checkbox" value="option1"
                                                                                        id="inlineCheckbox1"> 修复中
                                                                                </label>
                                                                                <label class="checkbox-inline"><input
                                                                                        type="checkbox" value="option2"
                                                                                        id="inlineCheckbox2"> 已下架
                                                                                </label>
                                                                            </div>
                                                                        </div>

                                                                    </div>

                                                                    <div class="hr-line-dashed"></div>
                                                                    <div class="form-group">
                                                                        <div class="col-sm-12 col-sm-offset-4">
                                                                            <button class="btn btn-white" type="reset">
                                                                                重置
                                                                            </button>
                                                                            <button class="btn btn-primary"
                                                                                    onclick="fnClickAddRow();"
                                                                                    type="submit">添加
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ibox-content">

                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered table-hover dataTables-example">
                                            <thead>
                                            <tr>
                                                <th>图书号</th>
                                                <th>图书名</th>
                                                <th>图书数量</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr th:each="Book: ${list}" class="gradeX">
                                                <td th:text="${Book.bookId}" th:name="Book_id"></td>
                                                <td th:text="${Book.name}" th:id="Book_Name"></td>
                                                <td th:text="${Book.number}" th:id="Book_number"></td>
                                                <td>
                                                    <button th:type="button" class="btn btn-info btn-sm"
                                                            data-toggle="modal" href="#modal-form-change"
                                                            data-th-placeholder="top" th:title="点击修改"
                                                            th:value="${Book.bookId}"
                                                            onclick="change(value)">修改
                                                    </button>
                                                    <!-- 修改图书按钮的弹窗 -->
                                                    <div id="modal-form-change" class="modal fade" aria-hidden="true">
                                                        <div class="modal-dialog">
                                                            <div class="modal-content">
                                                                <div class="modal-body">
                                                                    <div class="row">
                                                                        <div class="col-sm-12 b-r">
                                                                            <h3 class="m-t-none m-b text-center">
                                                                                修改图书</h3>

                                                                            <p>修改</p>

                                                                            <form action="/customer/adminBook/updateBook" method="get"
                                                                                  class="form-horizontal m-t">
                                                                                <div class="form-group"><label
                                                                                        class="col-sm-2 control-label">图书号</label>

                                                                                     <div class="col-sm-8"><input
                                                                                            type="text"
                                                                                            id="book_id"
                                                                                            class="form-control"
                                                                                            required
                                                                                            name="book_id"
                                                                                            placeholder="bookId">
                                                                                    </div>
                                                                                </div>

                                                                                <div class="hr-line-dashed"></div>

                                                                                <div class="form-group"><label
                                                                                        class="col-sm-2 control-label">图书名</label>

                                                                                    <div class="col-sm-8"><input
                                                                                            type="text"
                                                                                            id="book_name"
                                                                                            class="form-control"
                                                                                            required
                                                                                            name="book_name"
                                                                                            placeholder="bookname">
                                                                                    </div>
                                                                                </div>

                                                                                <div class="hr-line-dashed"></div>

                                                                                <div class="form-group"><label
                                                                                        class="col-sm-2 control-label">图书数量</label>

                                                                                    <div class="col-sm-8"><input
                                                                                            type="text"
                                                                                            id="book_num"
                                                                                            class="form-control"
                                                                                            required
                                                                                            name="book_number"
                                                                                            placeholder="booknum">
                                                                                    </div>
                                                                                </div>

                                                                                <div class="hr-line-dashed"></div>

                                                                                <div class="form-group">
                                                                                    <div class="col-sm-12 col-sm-offset-4">
                                                                                        <button class="btn btn-white"
                                                                                                type="reset">重置
                                                                                        </button>
                                                                                        <button class="btn btn-primary"
                                                                                                type="submit">添加
                                                                                        </button>
                                                                                    </div>
                                                                                </div>
                                                                            </form>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <button th:type="button" class="btn btn-info btn-sm"
                                                            data-toggle="modal" data-th-placeholder="top"
                                                            th:title="点击删除" th:value="${Book.bookId}"
                                                            onclick="deleteThis(value)">删除
                                                    </button>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="footer">
                        <div class="pull-right">
                            摆烂图书管理系统
                        </div>
                        <div>
                            <strong>Copyright</strong> 摆烂联盟 &copy; 2022
                        </div>
                    </div>

                </div>
            </div>
        </div>


        <!-- Mainly scripts -->
        <script th:src="@{/js/jquery-2.1.1.js}"></script>
        <script th:src="@{/js/bootstrap.min.js}"></script>
        <script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
        <script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
        <script th:src="@{/js/plugins/jeditable/jquery.jeditable.js}"></script>

        <script th:src="@{/js/plugins/dataTables/datatables.min.js}"></script>

        <!-- Custom and plugin javascript -->
        <script th:src="@{/js/inspinia.js}"></script>
        <script th:src="@{/js/plugins/pace/pace.min.js}"></script>

        <!-- Page-Level Scripts -->
        <script>
            function appoint(o) {
                var book_id = o;
                var number = document.getElementById("number");
                console.log(number);
                if (number <= 0) {
                    alert("数量不足")
                } else {
                    console.log(o);
                    $.ajax({
                        url: "/customer/book/appoint",
                        type: "get",
                        data: {"book_id": o},
                        dataType: "json",
                        contentType: "application/json",
                        error: function (data) {
                            alert("借阅失败");
                        },
                        success: function (data) {
                            alert("借阅成功");
                            location.reload();
                        }
                    });
                }
            }
            function deleteThis(o){
                console.log(o);
                $.ajax({
                    url:"/customer/adminBook/deleteBook",
                    type:"get",
                    data:{"book_id":Number(o)},
                    dataType:"json",
                    contentType:"application/json",
                    error: function (data) {
                    },
                    success:function (data) {
                        location.reload();
                    }
                });
            }
            function change(id) {
                console.log("change!");
                $.ajax({
                    url:"/customer/adminBook/query",
                    type:"get",
                    data:{"book_id":Number(id)},
                    dataType:"json",
                    contentType:"application/json",
                    error: function (response) {

                    },
                    success:function (response) {
                        console.log(response);
                        var inp1=document.getElementById("book_id");
                        var inp2=document.getElementById("book_name");
                        var inp3=document.getElementById("book_num");

                        inp1.value = response.data.bookId;
                        inp2.value = response.data.name;
                        inp3.value = response.data.number;
                        //location.reload();
                    }
                });


                location.href = "#modal-form-change";


            }

            $(document).ready(function () {
                $('.dataTables-example').DataTable({
                    dom: '<"html5buttons"B>lTfgitp',
                    buttons: [{
                        extend: 'copy'
                    }, {
                        extend: 'csv'
                    }, {
                        extend: 'excel',
                        title: 'ExampleFile'
                    }, {
                        extend: 'pdf',
                        title: 'ExampleFile'
                    },

                        {
                            extend: 'print',
                            customize: function (win) {
                                $(win.document.body).addClass('white-bg');
                                $(win.document.body).css('font-size', '10px');

                                $(win.document.body).find('table')
                                    .addClass('compact')
                                    .css('font-size', 'inherit');
                            }
                        }
                    ]

                });

                /* Init DataTables */
                var oTable = $('#editable').DataTable();

                /* Apply the jEditable handlers to the table */
                oTable.$('td').editable('../example_ajax.php', {
                    "callback": function (sValue, y) {
                        var aPos = oTable.fnGetPosition(this);
                        oTable.fnUpdate(sValue, aPos[0], aPos[1]);
                    },
                    "submitdata": function (value, settings) {
                        return {
                            "row_id": this.parentNode.getAttribute('id'),
                            "column": oTable.fnGetPosition(this)[2]
                        };
                    },

                    "width": "90%",
                    "height": "100%"
                });


            });

            function fnClickAddRow() {
                $('#editable').dataTable().fnAddData([
                    "Custom row",
                    "New row",
                    "New row",
                    "New row"
                ]);

            }
        </script>

    </body>

</html>